TUJ Fall 2020
HyperText Markup Language
Defines the structure of our content.
Structure is necessary to help machines understand what to do with our content.
The better machines understand our content, the more helpful they can be for us, the human users.
HTML is comprised of <tags> which are wrapped around content to create nodes or elements.
In our discussion of HTML, there’s a topic we keep coming back to…
HTML enhances our content. Without content, the HTML is meaningless.
Two volunteers to walk us through how they made their markup.
When the content, structure and visual presentation align with goals you’ve created, you will have an effective design.
credit: Wenger 16999 at amazon.com
General goals are:
Another enhancement to our content.
Key concepts in visual design:
credit: Yarbus AL. Eye Movements and Vision. New York: Plenum Press; 1967.
Some things will inherently draw our focus more than others.
Use animation sparingly!!!
Bright Colors
credit: imdb.com, Sin City theatrical movie poster.
Circles
Scale
Elements in a composition have visual weight (due to things like shape, color, size, etc.) In a good (pleasing) composition elements with different weights will balance each other out along some imaginary axis.
credit: artnet.nmu.edu/
The easiest way of achieving balance.
credit: Yasmen Saeed via Dribbble
Characteristics:
Pros:
Cons:
Breaking Symmetry
credit: Yasmen Saeed via Dribbble
Creating symmetry and then breaking it can be a great way to draw users visually to something you really want them to notice.
credit: Aimm via Dribble
credit:Shamin Yassar via Dribble
Provides an order to layout by anchoring different elements to one another
“Breaking” a grid with curves and diagonals
credit: Matt Adamson
Goal: Push your code to Github
Step 1: Sign into GitHub Desktop
Step 2: Clone a repo
Clone this starter repo:
Step 3: Make a copy in your own repo
In your browser, create new repo on GitHub:
Copy the link to the new repo:
In GitHub Desktop, change the repository settings
Step 4: Make some changes to the code
Step 5: Commit
Step 6: Push
Check on github!
All HTML documents need a root <html> element.
We use a <head> section to include metadata about our page:
The main content of an HTML document goes inside of the <body> tag.